<template>
    <div>
      <a-menu
        style="width: 256px"
        mode="inline"
        theme="dark"
        :items="items"
        @click="clickmenu"
      />
    </div>
</template>
<script setup>
  import { h, ref, watch } from 'vue';
  import {
    BranchesOutlined,
    FormOutlined,
    RadiusSettingOutlined,
  } from '@ant-design/icons-vue';
  import { defineProps } from 'vue'
 
    const props = defineProps({
        showDrawer: Function,
        showDrawerLine: Function,
        updateStartDrive: Function,
        onCloseMenu: Function
    })

//     const open1 = ref(props.open1);
// watch(() => props.open1, (newValue) => {
//   open1.value = newValue;
// });
  
  const selectedKeys = ref(['1']);
  const clickmenu = (e)=>{
    console.info(e,123136465);
    
  }
  const items = ref([
    {
      key: '1',
      icon: () => h(FormOutlined),
      label: '行政区域',
      title: '行政区域',
      onClick:()=>{
        props.showDrawer(null,'govArea')
        props.onCloseMenu()
      }
    },
    {
      key: '2',
      icon: () => h(RadiusSettingOutlined),
      label: '多边形区域',
      title: '多边形区域',
      onClick:()=>{
        props.showDrawer(null,'polygon')
        props.onCloseMenu()
      }
    },
    {
      key: '3',
      icon: () => h(BranchesOutlined),
      label: '绘制线路',
      title: '绘制线路',
      onClick:()=>{
        props.showDrawerLine(null,'govLine')
        props.updateStartDrive()
        
        props.onCloseMenu()
      }
    },
    // {
    //   key: 'sub2',
    //   icon: () => h(SettingOutlined),
    //   label: 'Navigation Four',
    //   title: 'Navigation Four',
    //   children: [
    //     {
    //       key: '7',
    //       label: 'Option 7',
    //       title: 'Option 7',
    //     },
    //     {
    //       key: '8',
    //       label: 'Option 8',
    //       title: 'Option 8',
    //     }
    //   ],
    // },
  ]);
</script>